<template>
    <el-card shadow="never" style="border: 0;">
        <yun-form
                :data="row"
                ref="fastForm"
                :tabs="tabs"
                v-if="columns"
                :columns="columns">
                <template #default>
                    {:token_field()}
                </template>
                <template #latlng="{rows}">
                    <el-form-item label="经纬度:" prop="latlng">
                        <Qqmap :value="rows.latlng" @change="changePosition"></Qqmap>
                    </el-form-item>
                </template>
                <template #goods="{rows}">
                    <el-form-item v-for="(item,index) in goods" :label="item.name+':'">
                        <Fieldlist @change="changeGoods" :value="item.spec" :label="['规格名称','规格单价']" :keys="['name','price']">
                            <template #name="{list,row}">
                                <el-input :disabled="true" :value="list[row].name"></el-input>
                            </template>
                            <template #price="{list,row}">
                                <el-input type="number" v-model="list[row].price">
                                    <template #append>元/{{list[row].unit}}</template>
                                </el-input>
                            </template>
                        </Fieldlist>
                    </el-form-item>
                </template>
        </yun-form>
    </el-card>
</template>
<script>
    import form from "@components/Form.js";
    import qqmap from "@components/position/QqMap.js";
    import fieldlist from "@components/Fieldlist.js";
    import {formatDate,inArray} from "@util.js";
    export default{
        components:{
            'YunForm':form,
            'Qqmap':qqmap,
            'Fieldlist':fieldlist
        },
        data:{
            columns:'',
            tabs:['基础资料','业务设置','商品设置'],
            goods:Yunqi.data.goods,
            companyColumns:[
                {field: 'id',tab:0,title:'ID',width:80,edit:'hidden'},
                {field: 'customer_type',tab:0,title:'用户类型',width:80,edit:{form: 'input',type:'hidden',value:'company'}},
                {field: 'name',tab:0,title: '公司名称',edit:'text',rules:'required'},
                {field: 'license_photo',tab:0, title: '营业执照',edit:'image'},
                {field: 'license',tab:0, title: '执照编号',edit:'text',rules:'required'},
                {field: 'cover_url',tab:0, title: '门头',edit:'image'},
                {
                    field:"user_id",
                    tab:0,
                    title:"绑定用户",
                    edit:{"form":"selectpage","url":"user/index/index","labelField":"nickname","keyField":"id","multiple":true},
                },
                {field: 'contact', tab:0,title: '联系人',edit:'text',rules:'required'},
                {field: 'mobile', tab:0,title: '手机',edit:'text',rules:'required;mobile'},
                {
                    field:"area",
                    tab:0,
                    title:"所属区域",
                    edit:{form:"cascader",name:"area",url:"ajax/area",level:3},
                    rules:"required"
                },
                {
                    field: 'latlng',
                    tab:0,
                    title: '经纬度',
                    rules:'required',
                    edit: {form:'slot',name:'latlng',value:function(row){
                        let longitude=row.longitude;
                        let latitude=row.latitude;
                        if(longitude && latitude){
                            return latitude+','+longitude;
                        }}
                    },
                },
                {field: 'address', tab:0, title: '详细地址',edit:'textarea'},
                {field: 'status', tab:0, title: '状态',edit:{form:'radio',value:'normal'},searchList: {'normal': __('正常'),'hidden': __('隐藏')}},
                {field: 'gird_id', tab:1,title: '配送网格',edit:'select',rules:'required',searchList: Yunqi.data.gird},
                {field: 'settle_type', tab:1,title: '结算方式',edit:'checkbox',rules:'required',searchList: Yunqi.data.settleType},
                {field: 'bill_date', tab:1,title: '账单日期',edit:{form:'input',type:'number',append:'号'},rules:'range(1~31)',visible:function (row){
                    return inArray(row.settle_type,'month');
                }},
                {field: 'goods', tab:2, title: '商品单价',edit:{name:'goods',value:Yunqi.data.goods,form:'slot'}},
            ],
            familyColumns:[
                {field: 'id',tab:0,title:'ID',width:80,edit:'hidden'},
                {field: 'customer_type',tab:0,title:'用户类型',width:80,edit:{form: 'input',type:'hidden',value:'family'}},
                {
                    field:"area",
                    tab:0,
                    title:"所属区域",
                    edit:{form:"cascader",name:"area",url:"ajax/area",level:3},
                    rules:"required"
                },
                {field: 'address',tab:0, title: '住户地址', rules:'required',edit:{form: 'input',type:'textarea',placeholder:'请输入街道/小区/楼号'}},
                {
                    field: 'latlng',
                    tab:0,
                    title: '经纬度',
                    rules:'required',
                    edit: {form:'slot',name:'latlng',value:function(row){
                            let longitude=row.longitude;
                            let latitude=row.latitude;
                            if(longitude && latitude){
                                return latitude+','+longitude;
                            }}
                    },
                },
                {
                    field:"user_id",
                    tab:0,
                    title:"绑定用户",
                    edit:{"form":"selectpage","url":"user/index/index","labelField":"nickname","keyField":"id","multiple":true},
                },
                {field: 'contact', tab:0,title: '联系人',rules:'required',edit:'text'},
                {field: 'mobile', tab:0,title: '手机',rules:'required;mobile',edit:'text'},
                {field: 'status', tab:0,title: '状态',edit:{form:'radio',value:'normal'},searchList: {'normal': __('正常'),'hidden': __('隐藏')}},
                {field: 'gird_id', tab:1,title: '配送网格',edit:'select',rules:'required',searchList: Yunqi.data.gird},
                {field: 'settle_type', tab:1,title: '结算方式',edit:'checkbox',rules:'required',searchList: Yunqi.data.settleType},
                {field: 'bill_date', tab:1,title: '账单日期',edit:{form:'input',type:'number',append:'号'},rules:'range(1~31)',visible:function (row){
                    return inArray(row.settle_type,'month');
                }},
                {field: 'goods', tab:2, title: '商品单价',edit:{name:'goods',value:Yunqi.data.goods,form:'slot'}},
            ],
            row:Yunqi.data.row || {settle_type:'sale_pay',bill_date:formatDate(new Date()),goods:[]},
        },
        onLoad:function (e){
            if(e.type=='company'){
                this.columns=this.companyColumns;
            }
            if(e.type=='family'){
                this.columns=this.familyColumns;
            }
        },
        methods: {
            changePosition:function (value){
                this.$refs.fastForm.setValue('latlng',value);
            },
            changeGoods:function (value){
                this.$refs.fastForm.setValue('goods',value);
            }
        }
    }
</script>
<style>

</style>

